<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
</head>
<body>

<%--
    添加和修改的弹框
--%>
<form class="layui-form" lay-filter="addOrUpdate" id="addOrUpdate"  hidden>
    <input type="hidden" name="rid" placeholder="请输入id" autocomplete="off" class="layui-input">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-inline">
            <input type="text" name="rname"  placeholder="请输入角色名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色介绍</label>
        <div class="layui-input-inline">
            <input type="text" name="memo" lay-verify="password" placeholder="请输入角色介绍" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select name="status" lay-verify="required" id="selDept" lay-filter="aihao">
                <option value="">请选择启动或者禁用</option>
                <option value="1">启用</option>
                <option value="0">禁用</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="stRole">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%--
    数据表格
--%>
<table class="layui-hide" id="role" lay-filter="role"></table>

<%--权限 的弹框--%>
<div id="treeDemo" style="display: none">
    <div id="test7" class="demo-tree"></div>
    <%--提交修改权限的按钮--%><br>
    <button class="layui-btn layui-btn-sm" id="subPer">提交权限修改</button>
</div>

<%--头导航栏--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addRol"><i class="layui-icon">&#xe654;</i></button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon">&#xe669;</i></button>
    </div>
</script>
<%--右侧导航栏--%>
<script type="text/html" id="barDemo">
    {{#  if(d.rid == 1){ }}
    <p>最高权限不能修改</p>
    {{#  } else { }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="upd">修改权限</a>
    {{#  } }}
</script>

<script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>

<script>
    layui.use(['table','form','layer','jquery','tree'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var tree = layui.tree;

        /*
        * 把查询到的数据填充到表格中
        * 并把这个表格 封装起来， 方便后面 其他功能 的 调用
        * */
        function showtable(){
            table.render({
                elem: '#role'
                ,url:'${pageContext.request.contextPath}/role/selectAllRole'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '用户数据表'
                ,cols: [[
                    /*{type: 'checkbox', fixed: 'left'}
                    ,*/{field:'rid', title:'角色id', fixed: 'left', unresize: true, sort: true,hide:true}
                    ,{field:'rname', title:'角色名', edit: 'text'}
                    ,{field:'memo', title:'角色介绍', edit: 'text', sort: true}
                    ,{field:'status', title:'状态',templet:function (d) {
                            if (d.status == 1){
                                return'<button class="layui-btn layui-btn-xs layui-btn-radius">启用</button>' ;
                            }else {
                                return '<button class="layui-btn layui-btn-xs layui-btn-danger layui-btn-radius">禁用</button>';
                            }
                        }
                    }
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
                ,page: true
            });
        }

        /*
        * 当页面加载时 加载的内容
        * */
        $(function () {
            showtable();
            //loadPremission();
        })

        /*
        * 增加 和 修改 的 表单提交事件
        * */
        form.on('submit(stRole)', function(data){
            $.ajax({
                type:'post'
                ,url:'${pageContext.request.contextPath}/role/updateAndInsertRole'
                ,dataType:'json'
                ,data:data.field
                ,success:function (data) {
                    layer.closeAll();
                    if (data.code == "1001"){
                        layer.msg(data.msg, {icon: 1});
                    }else {
                        layer.msg(data.msg, {icon: 5});
                    }
                    showtable();
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //加载所有权限菜单的方法
        function loadPremission(){
            $.ajax({
                type:'post'
                ,url:'${pageContext.request.contextPath}/menu/getAllMenu'
                ,success:function (data) {
                    //开启复选框
                    tree.render({
                        elem: '#test7'
                        ,data: data
                        ,id:'treeId'
                        ,showCheckbox: true
                    });
                }
            })
        }

        //头工具栏事件
        table.on('toolbar(role)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'addRol':
                    $("#addOrUpdate")[0].reset();
                    layer.open({
                        type: 1
                        ,area: ['350px', '300px']
                        ,anim:6
                        ,maxmin:true
                        ,content: $('#addOrUpdate') //注意，如果str是object，那么需要字符拼接。
                    });
                    $.ajax({
                        type:'post'
                        ,dataType:'json'
                        ,url:'${pageContext.request.contextPath}/staff/maxStaffId'
                        ,success:function (data) {
                            form.val("addOrUpdate", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                                "staffId": data+1 // "name": "value"
                            });
                        }
                    })
                    break;
                case 'refresh':
                    showtable();
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(role)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){ //这是对 入职/离职按钮进行操作的
                layer.confirm('确定要删除吗', function(index){
                    $.ajax({
                        type: 'post'
                        ,data:{"rid":data.rid}
                        ,dataType:'json'
                        ,url: '${pageContext.request.contextPath}/role/deleteRole'
                        ,success:function (data) {
                            if (data.code == "1001"){
                                layer.msg(data.msg, {icon: 1});
                            }else if (data.code == "1002"){
                                layer.msg(data.msg, {icon: 5});
                            }else {
                                layer.msg(data.msg, {icon: 5});
                            }
                            showtable();
                        }
                    })
                });
            } else if(obj.event === 'edit'){
                $("#addOrUpdate")[0].reset(); //提前把表格中的内容 清空
                layer.open({
                    type: 1
                    ,area: ['350px', '300px']
                    ,anim:6
                    ,maxmin:true
                    ,content: $('#addOrUpdate') //注意，如果str是object，那么需要字符拼接。
                });
                form.val('addOrUpdate', data); //把点击的这一行的内容添加到表单中
            }else if(obj.event === 'upd'){
                //再点击按钮之后 弹窗之前 加载 获取到的所有权限，
                // 这样就是每次点击都要加载，相当于点击之后的一次清空
                loadPremission();
                layer.open({
                    type: 1
                    ,area: ['300px', '300px']
                    ,title:'修改权限'
                    ,anim:6
                    ,maxmin:true
                    ,content: $('#treeDemo') //注意，如果str是object，那么需要字符拼接。
                    ,success:function () {
                        //成功之后发送 ajax 请求，根据当前角色的rid查询所有权限菜单的mid数组
                        $.ajax({
                            type:'post'
                            ,url:'${pageContext.request.contextPath}/menu/getAllMidByRid'//根据当前角色的rid查询所有权限菜单的mid数组
                            ,data:{"rid":data.rid}    //取到当前点击的角色的rid，发到后台
                            ,success:function (data) {
                                //成功之后， 把查询到的mid数组中的值对应的复选框 勾选
                                tree.setChecked('treeId',data); //批量勾选，把从后端传过来的mid对应的复选框勾选
                            }
                        })
                    }
                })
                //提交修改后的权限的按钮方法
                $("#subPer").click(function () {
                    //获得选中的节点
                    var checked = tree.getChecked("treeId");
                    //定义一个数组，用来储存所有被选中的节点的id
                    var checkArr = [];
                    for (var i =0;i<checked.length;i++){//第一次遍历父菜单
                        checkArr.push(checked[i].id);
                        //因为只有children中才有子菜单，所以要遍历子菜单的id，也存入checkArr数组中
                        if (checked[i].children != null){
                            for (var j = 0;j<checked[i].children.length;j++){
                                checkArr.push(checked[i].children[j].id);//将子菜单的id存入数组中
                            }
                        }
                    }
                    //再次发送ajax 请求，将rid和获取到的勾选的数组发送到后台
                    $.ajax({
                        type:'post'
                        ,data:{"rid":data.rid,"checkArr":checkArr.join(",")}
                        ,dataType:'json'
                        ,url:'${pageContext.request.contextPath}/menu/updateMenuByRid'
                        ,success:function (data) {
                            if (data.code == "1001"){
                                layer.closeAll();
                                layer.msg(data.msg, {icon: 1});
                            }
                        }
                    })
                })
            }
        });
    });
</script>

</body>
</html>
